<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
    身份证Base64<input type="text" required id="idCardBase64" name="idCardBase64"><br>
    <input type="button" id ="idButton" value="识别"/>
    <div id="id">身份证识别结果</div>
    <br>
    银行卡Base64<input type="text" required id="bankCardBase64" name="bankCardBase64"><br>
    <input type="button" id="bankButton" value="识别"/>
    <div id="bank">银行卡识别结果</div>
</body>

<script>
    $(document).ready(function () {
        $("#idButton").click(function () {
            $.ajax({
                url: "/idCardOCR",
                data: {
                    idCardBase64: $("input[name='idCardBase64']").val(),
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    document.getElementById("id").innerHTML = data.idcard;
                },
                error: function (er) {
                    alert(er);
                }
            });
        });

        $("#bankButton").click(function () {
            $.ajax({
                url: "/bankCardOCR",
                data: {
                    bankCardBase64: $("input[name='bankCardBase64']").val(),
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    document.getElementById("bank").innerHTML = data.bankcard;
                },
                error: function (er) {
                    alert(er);
                }
            });
        });
    });
</script>
</html>